<template>
  <view>
    <view class="img-block">
      <view class="bg-img" v-for="(item, index) in value" :key="index">
        <image
          :src="item"
          class="bg-img"
          mode="aspectFill"
          @tap="previewImage(item, value)"
        ></image>
        <view class="cu-tag" @tap.stop="delAct" :data-index="index">
          <u-icon name="trash" color="#ffffff" size="14"></u-icon>
        </view>
      </view>
      <view
        class="bg-img upload-btn"
        @click="uploadAct"
        v-if="
          display ? value.length < num && value.length > 0 : value.length < num
        "
      >
        <view class="camera-tag">
          <u-icon
            name="camera-fill"
            color="rgba(102,102,104,0.5)"
            size="96rpx"
          ></u-icon>
          <view class="upload-tip" v-if="uploadTip">{{ uploadTip }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadImg } from "@/api/common.js";
export default {
  props: {
    value: {
      type: Array,
      default: function () {
        return [];
      },
    },
    num: {
      type: Number,
      default: 5,
    },
    display: {
      type: Boolean,
      default: !1,
    },
    uploadTip: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uploadIndex: 0,
      uploadTmp: [],
    };
  },
  created() {},
  methods: {
    delAct(e) {
      let index = parseInt(e.currentTarget.dataset.index);
      let photos = JSON.parse(JSON.stringify(this.value));
      photos.splice(index, 1);
      this.$emit("input", photos);
    },
    uploadAct() {
      //上传图片/视频
      uni.chooseImage({
        count: this.num - this.value.length,
        mediaType: ["image", "video"],
        maxDuration: 30,
        success: (res) => {
          console.log(res);
          this.uploadTmp = res.tempFiles.map((item) => item.path);
          uni.showLoading({
            title: "上传中",
            mask: true,
          });
          this.upload();
        },
      });
    },
    upload() {
      if (this.uploadIndex == this.uploadTmp.length) {
        this.uploadIndex = 0;
        this.uploadTmp = [];
        uni.hideLoading();
        return;
      }
      uploadImg(this.uploadTmp[this.uploadIndex])
        .then((res) => {
          this.uploadIndex = this.uploadIndex + 1;
          let photos = JSON.parse(JSON.stringify(this.value));
          photos.push(res);
          this.$emit("input", photos);
          this.upload();
        })
        .catch((res) => {
          this.uploadIndex = this.uploadIndex + 1;
          this.upload();
        });
    },

    getType(item) {
      let fileExtension = "";
      if (item.lastIndexOf(".") > -1) {
        fileExtension = item.slice(item.lastIndexOf(".") + 1);
      }
      if (
        fileExtension == "png" ||
        fileExtension == "jpg" ||
        fileExtension == "jpeg" ||
        fileExtension == "gif"
      ) {
        return 0;
      } else {
        return 1;
      }
    },
  },
};
</script>

<style lang="scss">
.img-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 34rpx;
  .bg-img {
    width: 204rpx;
    height: 204rpx;
    border-radius: 2rpx;
    position: relative;

    .cu-tag {
      width: 38rpx;
      height: 38rpx;
      background: rgba(0, 0, 0, 0.21);
      border-radius: 0 0 0 100rpx;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 2rpx 2rpx 0 0;
    }
  }

  .bg-img:nth-child(4n) {
    margin-right: 0;
  }
}

.bg-img.upload-btn {
  border-radius: 2rpx;
  box-sizing: border-box;
  background-color: #f7f7f7;
  .camera-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .upload-tip {
      font-size: 28rpx;
      color: #666668;
    }
  }
}
</style>
